<template>
  <div class="index">
    <div class="header">
      <indexHeader></indexHeader>
    </div>
    <div class="leftSide">
      <leftSide></leftSide>
    </div>
    <div class="rightSide">
      <router-view class="routerView"></router-view>
    </div>
  </div>
</template>
<script>
import indexHeader from "../components/indexHeader";
import leftSide from "../components/leftSide";
export default {
  name: "index",
  components: { indexHeader, leftSide },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 0.56rem;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #1278f6, #00b4aa 50%, #1278f6);
  z-index:1000;
  @include changeTheme;
}
.leftSide {
  height: 100%;
  width: 2rem;
  position: fixed;
  top: 0.56rem;
  left: 0;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.leftSide::-webkit-scrollbar{
  width: 0 !important
}
.rightSide {
  width: 100%;
  height: 100%;
  padding: 0.56rem 0 0 2rem;
  
}
.routerView {
  width: 100%;
}
</style>


